<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>
        <script type="text/javascript">
            var seq = 0;
            var color = '#00FFFF';
            var pointNum = 100;
            var xSeq = [];
            var data = [];
            for (var i = 0; i < pointNum; i++) {
                xSeq.push(0);
                data.push(0);
            }
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};

            var option;

            option = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: xSeq
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: data,
                    itemStyle: {
                        color: function () {
                            return color;
                        }
                    },
                    lineStyle: {
                        color: function () {
                            return color;
                        }
                    },
                    type: 'line',
                    smooth: true
                }]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        </script>
        <script type="text/javascript">
            function pushData(item) {
                xSeq.push(seq++);
                data.push(item);
                xSeq.shift();
                data.shift();
                option.xAxis.data = xSeq;
                option.series.data = data;
                myChart.setOption(option);
            }
            function setColor(newColor) {
                color = newColor;
                myChart.setOption(option)
            }
        </script>
    </body>
</html>
    